<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <mycom></mycom>

</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.js"></script>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">
    /*
    * 1. 定义组件
    *   1.1 方式1 直接在实例化之前定义
    *   1.2 方式2 可以在实例化的参数里面进行定义
    * 2. 使用组件
    *   我们可以把第一步定义组件的名称当成是一个 html 标签，在vuejs管理的区域进行使用
    *
    *
    *   vuejs 里面的组件其实就是用户自定义的标签
    * */

    /*
    * 下面的 api 用于定义组件
    * 参数1：组件的名称
    * 参数2：组件对象
    *   template 属性，用于定义组件的结构的，有且仅有一个根节点
    *
    *   Component template should contain exactly one root element
    *
    * */
    Vue.component('mycom', {
        template: `
            <div>
                <div>我是第一个组件</div>
                <p>我是p标签</p>
            </div>
        `
    });

    const vm = new Vue({
        el: '#app',
        data: {
            n: 1,
        },

    })

</script>

</html>
